<script lang="tsx">
import {defineComponent, ref, watch} from "vue";
import {ElRadioGroup,ElRadioButton} from  'element-plus'
import {useDictStore} from "/@/store/modules/dict";
import {radioProps,RadioProps} from "/@/components/Base/BaseRadioButton/ts";

export default defineComponent({
  name: "BaseRadioButton",
  props: radioProps,
  setup(props: RadioProps, {expose, emit, slots}){
    const  options = ref<any[]>([])
    watch(
        () => props.dict,
        async (newValue) => {
          if(newValue){
            const  dictStore = useDictStore()
            let res = await dictStore.getDict(newValue);
            if(props.toNumber){
              res.forEach(res=>{
                res.value = Number.parseInt(res.value as string)
              })
            }
            options.value = res

          }
        },
        { immediate: true }
    );

    watch(
        () => props.options,
        async (newValue) => {
          if(newValue){
            options.value = newValue
          }
        },
        { immediate: true }
    );

    const render = () => {
      let key = props.props.value || 'value';
      let label = props.props.label || 'label'
      let enabled = props.props.disabled || 'disabled'
      return <ElRadioGroup >
        {
          options.value.map((res)=>{
            return <ElRadioButton label={res[key]} disabled={res[enabled]}>
              {res[label]}
            </ElRadioButton>
          })
        }
      </ElRadioGroup>
    }
    return render
  }
})
</script>

<style scoped>

</style>